<template>
	<view class="wapper">
		<view class="form-title">
			实际总费用：
			<text>
				{{totalPrice.toFixed(2)}}
			</text>
			元

		</view>
		<view class="table">
			<view class="pro-header">
				<view class="head-index">
					序号
				</view>
				<view class="head-one">
					物资名称
				</view>
				<view class="head-two">
					实际单价
				</view>
				<view class="head-three">
					实际入库数量
				</view>
			</view>
			<template v-if="detailInfo.materialList && detailInfo.materialList.length>0">
				<view class="pro-list" v-for="(item,index) in detailInfo.materialList" :key="index">
					<view class="list-index">{{index+1}}</view>
					<view class="list-one">{{item.materialName}}</view>
					<view class="list-two">
						<input type="number" placeholder="请输入" border="surround" v-model="item.actualPrice"
							@blur="onExchange(index, item,'price')" />
						元
					</view>
					<view class="list-three">
						<input type="number" placeholder="请输入" border="surround" v-model="item.actualQuantity"
							@blur="onExchange(index, item,'quantity')" />

					</view>
					<view class="clear"></view>

				</view>

			</template>
			<view class="clear"></view>

		</view>
		<view class="footer" @click="newSubmit">
			提交
		</view>

	</view>
</template>

<script>
	import {
		getPurchaseDetail,
		completePurchase
	} from '@/api/purchase.js'

	export default {
		components: {


		},
		data() {
			return {
				id: '',
				detailInfo: {},
				totalPrice: 0,

			}
		},
		created() {

		},
		onLoad(option) {
			this.id = option.id || ''
			this.getDetail()
		},
		methods: {
			onExchange(index, row, name) {
				let moment = this.detailInfo.materialList[index] // 此处的mapActionList为自己的table表格绑定的data数组
				this.$set(this.detailInfo.materialList, index, moment)
				const reg = /^[0-9][0-9]*([\.][0-9]{1,2})?$/
				if (name === 'price') {
					if (!reg.test(row.actualPrice)) {
						uni.showToast({
							icon: 'none',
							title: '请输入数字且保留2位小数',
							duration: 3000,
						})
						row.actualPrice = ''
						return

					} else {
						let sum = 0
						this.detailInfo.materialList.forEach((item) => {
							if (item.actualPrice && item.actualQuantity) {
								sum += Number(item.actualPrice) * Number(item.actualQuantity)
							}
						})
						this.totalPrice = sum
					}
				}
				if (name === 'quantity') {
					const regQuantity = /^\d*\.{0,1}\d{0,1}$/
					if (!regQuantity.test(row.actualQuantity)) {
						uni.showToast({
							icon: 'none',
							title: '请输入数字且保留1位小数',
							duration: 3000,
						})
						row.actualQuantity = ''
						return
					} else {
						let sum = 0
						this.totalPrice = sum
						this.detailInfo.materialList.forEach((item) => {
							if (item.actualPrice && item.actualQuantity) {
								sum += Number(item.actualPrice) * Number(item.actualQuantity)
							}
						})
						this.totalPrice = sum
					}
				}

			},
			getDetail() {
				const id = this.id
				getPurchaseDetail({
					id
				}).then(response => {
					this.detailInfo = response.data
				})
			},

			/** 提交按钮 */
			newSubmit() {
				const regQuantity = /^[1-9]\d*$/
				const materialList = []
				for (let i = 0; i < this.detailInfo.materialList.length; i++) {
					const row = this.detailInfo.materialList[i]
					if (row.actualPrice === '') {
						uni.showToast({
							icon: 'none',
							title: '请输入实际单价',
							duration: 3000,
						})
						return
					}
					if (row.actualQuantity === '') {
						uni.showToast({
							icon: 'none',
							title: '请输入实际数量',
							duration: 3000,
						})
						return
					}

					const obj = {
						id: row.id,
						actualQuantity: row.actualQuantity,
						actualPrice: row.actualPrice
					}
					materialList.push(obj)
				}
				const param = {
					id: this.id,
					materialList: materialList
				}
				uni.showLoading({
					mask: true,
					title: '加载中',
				})
				completePurchase(param).then(response => {
					if (response.code === 200) {
						uni.showToast({
							icon: 'none',
							title: '保存成功',
							mask: true,
							duration: 2000,
						})
						setTimeout(() => {
							uni.hideLoading()
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					} else {
						uni.hideLoading()
					}

				}).finally(() => {})

			},


		}
	}
</script>

<style lang="scss" scoped>
	.wapper {
		width: 100vw;
		min-height: 100vh;
		background: #F5F7F9;
		overflow: hidden;

		.form-title {
			margin-top: 10rpx;
			background: #fff;
			height: 112rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 28rpx;
			font-weight: 400;
			color: #323232;
			padding: 0 80rpx;
			border-bottom: 1rpx solid #F5F7F9;
		}

		.clear {
			clear: both;
		}

		.table {
			background: #fff;
			padding: 30rpx;

			.pro-header {
				background: #F5F7FA;
				border-radius: 3rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #8C99A7;

				.head-index {
					width: 110rpx;
					text-align: center;
					float: left;
				}

				.head-one {
					width: 184rpx;
					float: left;
				}

				.head-two {
					width: 184rpx;
					float: left;
					text-align: center;
				}

				.head-three {
					float: left;
					width: calc(100% - 478rpx);
					text-align: center;
				}
			}

			.pro-list {
				padding: 10rpx 0;
				font-size: 22rpx;
				font-weight: 400;
				color: #303133;

				.list-index {
					width: 110rpx;
					text-align: center;
					float: left;
				}

				.list-one {
					width: 184rpx;
					float: left;
				}

				.list-two {
					width: 184rpx;
					float: left;
					display: flex;
					align-items: center;
					justify-content: center;

					input {
						width: 76rpx;
						font-size: 22rpx;
					}

					/deep/ .uni-input-input,
					/deep/ .input-placeholder {
						font-size: 22rpx;

					}

					/deep/ .u-input__content {
						width: 76rpx;
					}

					/deep/ .u-input {
						padding-left: 0 !important;


					}
				}

				.list-three {
					float: left;
					width: calc(100% - 478rpx);
					display: flex;
					align-items: center;
					justify-content: center;

					input {
						width: 76rpx;
						font-size: 22rpx;
					}

					/deep/ .uni-input-input,
					/deep/ .input-placeholder {
						font-size: 22rpx;
					}

					/deep/ .u-input {
						padding-left: 0 !important;
					}
				}

				&:nth-of-type(odd) {
					background: #F5F7FA;
				}
			}

		}

		.footer {
			width: 686rpx;
			height: 104rpx;
			background: #407FFF;
			border-radius: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// position: fixed;
			// bottom: 118rpx;
			// left: 38rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin: 38rpx auto;

		}
	}
</style>
